{include file="common/header"}
<div id="app" v-cloak>
    <div class="el-pane-warp">
	    <div style="margin-bottom:18px">
            当前主题：
            <el-select size="small" v-model="theme" @change="change()">
                <el-option v-for="(item, index) in themes" :label="item.title" :value="item.name">
                    {{item.title}}<span style="float: right;color: #999">{{item.name}}</span>
                </el-option>
            </el-select>
            <el-tooltip content="安装主题后可自由切换主题，修改配置即可" placement="top">
                <i style="color:#F56C6C;font-size:18px;margin-left: 5px;" class="el-icon-question"></i>
            </el-tooltip>
        </div>
		<el-field v-model="config" label-position="top" variable="system" :repeat="system"></el-field>
        <div class="el-bottom">
			<el-button 
				size="medium"
				:loading="loading" 
				type="primary" 
				icon="el-icon-refresh-right" 
				@click="save()">
				保 存
			</el-button>
		</div>
	</div>
</div>
<script>
	new Vue({
	    el: '#app',
	    data() {
	        return {
	        	url: "config/theme",
	        	theme: theme,
	        	system: {:json_encode($system)}, 
	        	themes: {:json_encode($themes)},
	        	config: {:json_encode($config.config)},
	        	loading: false,
	        }
	    },
	    methods: {
	        /**
             * 保存基础配置
             */
	        save() {
	        	let self = this;
	        	self.loading = true;
	        	request.post(self.url, {config: self.config}, function(res){
                    self.loading = false;
                    self.$notify({showClose: true, message: res.message, type: res.status});
                });
	        },
	        /**
             * 切换主题
             */
            change() {
                let self = this;
                self.$confirm('确定切换主题吗？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post('themes/update', {theme: self.theme}, function(res) {
                    if (res.status === 'success') {
                            location.href = location.href;
                        } else {
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        }
                    });
                }).catch(() => {});
            },
	    }
	})
</script>
{include file="common/footer"}